<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="../layui/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="shortcut icon" href="#"/>
    <script src="../lib/jquery.min.js" type="text/javascript"></script>
    <script src="../layui/lib/layui-v2.6.3/layui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        layui.use(['layer'], function () {
            var layer = layui.layer;
        })
        $(function () {
            // 页面初始化生成验证码
            window.onload = createCode('#loginCode');
            // 验证码切换
            $('#loginCode').click(function () {
                createCode('#loginCode');
            });
            // 登陆事件
            $('#loginBtn').click(function () {
                login();
            });
        });

        //生成验证码
        function createCode(codeID) {
            var code = "";
            var length = 4;
            // 验证码对象
            var objCode = $(codeID);
            // 随机数
            var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
                'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
            for (var i = 0; i < length; i++) {
                // 随机数索引
                var index = Math.floor(Math.random() * 36);
                code = code + random[index];
            }
            objCode.val(code);
        }

        // 校验空数据
        function isEmpty(value) {
            // 检验数据是否为空值，是则返回true；不是返回false
            if ($.trim(value) == '' || $.trim(value).length <= 0) {
                return true;
            } else {
                return false;
            }
        }

        // 校验数据
        function validateInput() {
            var username = $('#usernameInput').val();
            var password = $('#passwordInput').val();
            var expectCode = $('#loginCode').val();
            var actualCode = $('#loginCard').val();
            var usertype = $("input[name='userType']:checked").val();
            if (isEmpty(username)) {
                layer.alert("用户名不能为空！");
                return false;
            }
            if (isEmpty(password)) {
                layer.alert("密码不能为空！");
                return false;
            }
            if (isEmpty(actualCode)) {
                layer.alert("验证码不能为空！");
                return false;
            }
            actualCode = actualCode.toUpperCase();
            if (actualCode != expectCode) {
                layer.alert("验证码不对！");
                return false;
            }
            if (isEmpty(usertype)) {
                layer.alert("请选择账号类型！");
                return false;
            }
            return true;
        }

        // 清空输入数据
        function clearInput() {
            $('#usernameInput').val("");
            $('#passwordInput').val("");
            $('#loginCard').val("");
            $('#loginCode').click();
        }

        // 登录操作
        function login() {
            // 如果数据通过空值校验
            if (validateInput()) {
                var username = $('#usernameInput').val();
                var password = $('#passwordInput').val();
                var type = $("input[name='userType']:checked").val();
                var params = {"username": username, "password": password, "type": type};
                $.ajax({
                    type: 'post',
                    url: '/login.action',
                    dataType: 'json',//返回数据类型
                    data: JSON.stringify(params),
                    contentType: 'application/json',
                    success: function (data) {
                        console.log(data.type);
                        if (data.type == "success") {
                            location.href = "/home.html";
                        } else {
                            layer.msg("用户名或密码错误！",{icon:5});
                            clearInput();
                        }
                    },
                    error: function () {
                        layer.msg("系统错误，请稍后重试！",{icon:2});
                    }
                });
            }

        }
    </script>
</head>
<body>
<div class="wrap">
    <img src="../images/bg.jpg" class="bgImg">
    <div class="loginForm">
        <form>
            <div class="loginHead">
                <h2>高校宿舍管理系统</h2>
            </div>
            <div class="inputWrap">
                <div class="inputLabel">
                    <label for="usernameInput">用户名</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="usernameInput" class="layui-input adminInput" type="text" name="username"
                           placeholder="请输入用户名">
                </div>
            </div>
            <div class="inputWrap">
                <div class="inputLabel">
                    <label for="passwordInput">密码</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="passwordInput" class="layui-input adminInput" type="password" name="password"
                           placeholder="请输入密码">
                </div>
            </div>
            <div class="inputWrap">
                <div class="inputLabel">
                    <label for="loginCard">验证码</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" class="layui-input cardInput" autocomplete="off" type="text" name="card" placeholder="请输入验证码">
                </div>
                <div class="codeDiv">
                    <input id="loginCode" class="layui-input codeInput" type="button">
                </div>
            </div>
            <div class="inputWrap">
                <div class="inputLabel radioLabel">
                    <label>账号类型</label>
                </div>
                <div class="radioDiv">
                        <span>
                            <input type="radio" name="userType" id="rdoUser" value="0">
                            <label for="rdoUser">学生</label>
                        </span>
                    <span>
                            <input type="radio" name="userType" id="rdoStaff" value="1">
                            <label for="rdoStaff">教师</label>
                        </span>
                    <span>
                            <input type="radio" name="userType" id="rdoSuper" value="2">
                            <label for="rdoSuper">宿管员</label>
                        </span>
                </div>
            </div>
            <div class="inputWrap">
                <div class="submitDiv">
                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>